<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits, watch } from 'vue'
import { sendApi } from '/@/api/mes/feedback'
import { useInModal } from '/@/hooks/useModal'
import { useSuccessMessage } from '/@/hooks/useMessage'

const props = defineProps(({
  id: Number,
  sendQuantity: Number
}))

const emits = defineEmits(['change'])

const modal = useInModal()

const formRef = ref<FormMakerInstance>();
const formProps = reactive<FormMakerProps>({
  name: 'sendForm',
  model: {
    sendQuantity: props.sendQuantity
  },
  options: [
    {
      field: 'sendQuantity',
      label: '发送数',
      required: true
    }
  ]
})



const handConfirm = async (btnName: string) => {

  await formRef.value.validate()

  await modal.loadingWarp(async () => {
    const postData = {
      ...formProps.model,
      id: props.id
    }
    await sendApi(postData)

    useSuccessMessage(btnName + '成功');
    emits('change')
  })

  modal.close()
}


const viewLayout: ViewLayoutProps = {
  buttons: [
    {
      title: '发送',
      type: 'primary',
      onClick: handConfirm
    },
    { title: '取消', onClick: () => modal.close() },
  ]
}



</script>

<template>
  <ViewLayout v-bind="viewLayout">
    <template #header>
      <FormMaker v-bind="formProps" ref="formRef" />
    </template>
  </ViewLayout>
</template>